<template>
  <div class="Login">
    <sHeader :title="type == 'login' ? '登录' : '注册'"></sHeader>
    <div class="img"><img src="../assets/logo1.jpg" alt="" /></div>

    <!-- 登录 -->
    <div class="login" v-if="type == 'login'">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="verify"
            name="verify"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <!-- 验证码 -->
              <Verify ref="Verifys" class="verify"></Verify>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <div class="link-register" @click="toggle('register')">
            没有账号，立即注册
          </div>
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 注册 -->
    <div v-else class="register">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="verify"
            name="verify"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <!-- 验证码 -->
              <Verify ref="Verifys" class="verify"></Verify>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <div class="link-login" @click="toggle('login')">
            已有账号，立即登录
          </div>
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { ref, toRefs, reactive } from "@vue/reactivity";
import Verify from "../components/Verify.vue";
import sHeader from "@/components/Header.vue";
import { Toast } from "vant";
import { login, register } from "../service/user";
import md5 from "js-md5";
// import { useRouter } from "vue-router";
import { setLocal } from "../common/js/ustil";

export default {
  setup() {
    const Verifys = ref(null);
    // const router = useRouter();
    const state = reactive({
      username: "",
      password: "",
      verify: "",
      type: "login",
    });
    // 提交登录/注册
    const onSubmit = async (values) => {
      console.log(values, state.verify, Verifys.value.imgCode);
      // 验证验证码
      if (state.verify !== Verifys.value.imgCode) {
        Toast.fail("验证码错误");
        return;
      }

      // 发请求
      if (state.type == "login") {
        const { data } = await login({
          loginName: values.username,
          passwordMd5: md5(values.password),
        });
        console.log(data);

        // 将token存在本地
        setLocal("token", data);
        // router.push("/");
        window.location.href = '/' // 需要刷新页面，否则axios.js里面的token不会重置
      }
      else {
        await register({
          'loginName': state.username,
          'password': state.password
        })

        Toast.success('注册成功')
        state.type = 'login'
        state.verify = ''
      }
    };

    // 切换登录注册
    const toggle = (v) => {
      state.type = v;
      state.verify = null;
    };
    return {
      ...toRefs(state),
      onSubmit,
      Verifys,
      toggle,
    };
  },
  components: {
    sHeader,
    Verify,
  },
};
</script>

<style lang="less" scoped>
html {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom right, #6cc9b7, #3979cc);
}
img {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  margin: 80px auto 40px;
}
.login,
.register {
  display: block;
  padding: 0 20px;
}
.link-login,
.link-register {
  font-size: 14px;
  margin-bottom: 20px;
  color: #1989fa;
  display: inline-block;
}
</style>